<template>
   <div class="page bgc-fff">
     <x-header title="车辆信息"></x-header>
     <!-- main -->
     <div class="main mt46 f12">
      <div class="main-top pad-l-r15 flex a-between l-center">
        <div>请填写车辆信息</div>
        <div class="" style="width:.6rem;" >
          <p style="height:.26rem;line-height:.26rem;"
            class="min-btn c-01a4f6 ta-c"
              :disabled="untieBtnDisabled" :class="[{'bgc-01a4f6':!untieBtnDisabled}]"
              @click="UnbindCarrier">解绑</p>
        </div>
      </div>
      <!-- input -->
      <div class="input-cells bor-bottom">
        <div class="f-fl input-label">牵引车车牌号</div>
        <input v-show="!carrierBlockShow" type="text" class="cell-input" placeholder="请输入牵引车车牌号"
        maxlength="7" @focus="carrierPlateInputEnter" v-model.trim="keyWordCarrierPlate"
        @blur="carrierHaveChange" />
        <div v-show="carrierBlockShow" @click="carrierAlertClick" class="text-show-block">{{carParam.carrierInfo.plate}}</div>
      </div>
      <!-- 初始返回  trailer无值 则不展示 trailer-input, trailer有值 也不展示 trailer-input；
        当输入 carrier， 查询带出trailer ，则不展示 trailer-input ,展示trailer-block;
        当输入 carrier， 查询无trailer ，则展示 trailer-input ,不展示trailer-block; -->
      <div class="input-cells input-idcard bor-bottom">
        <div class="f-fl input-label">挂车车牌号</div>
        <input v-show="!trailerBlockShow"  type="text" class="cell-input"   placeholder="请输入挂车车牌号"
          @focus="trailerPlateInputEnter" maxlength="7" v-model.trim="keyWordTrailerPlate"  />
        <!-- <div v-show="!trailerBlockShow" class="text-show-block">
          <span v-show="carParam.trailerInfo.plate.length <= 6">挂</span>
        </div> -->
        <div v-show="trailerBlockShow" class="text-show-block">
          <span>{{carParam.trailerInfo.plate}}</span>
        </div>
      </div>
      <div class="input-cells input-idcard" >
        <div class="f-fl input-label">挂车类型</div>
        <div v-if="isTrailerAuthStatus" @click="downPickerShow=true">
          <span v-if="keyWordTrailerTrailerType">{{keyWordTrailerTrailerType}}</span>
          <span class="c-999" v-else>请选择挂车类型</span>
        </div>
        <div v-else>
          <span v-if="keyWordTrailerTrailerType">{{keyWordTrailerTrailerType}}</span>
          <span class="c-999" v-else>暂无挂车类型</span>
        </div>
      </div>
      <!-- 间隔 -->
      <div class="mo-spacing"></div>
      <!-- unpload -->
       <!--<cell-->
         <!--title="牵引车证件照"-->
         <!--is-link-->
         <!--class="ta-l bor-bottom pad-t-b15"-->
         <!--:border-intent="false"-->
         <!--:arrow-direction="showContent0 ? 'up' : 'down'"-->
         <!--@click.native="showContent0 = !showContent0"></cell>-->
       <div class="content-item bor-bottom" @click="showContent0 = !showContent0">
         <div class="flex a-start l-center">
           <!-- <i class="icon"></i> -->
           <span class="f14">牵引车证件照</span>
         </div>
         <img :src="staticImgData.btnRightImgUrl" :class="showContent0 ? 'up' : 'down'" alt="">
       </div>
      <!--<panel header="牵引车证件照" align="left" style="margin-top: 0;color: #333;"></panel>-->
      <flexbox v-if="showContent0" class="pad-t20 pad-b10 bgc-f4f4f4">
       <flexbox-item>
         <v-upload-img
           class="depart-upload-img"
           @upload-img-start='uploadImgStart'
           @upload-img-end='uploadImgEnd'
           :upload-post-data="postData"
           :upload-img-obj="uploadImgData[0]"></v-upload-img>
         <div class="upload-item-title">{{uploadImgData[0].title}}</div>
       </flexbox-item>
       <flexbox-item>
         <v-upload-img
           class="depart-upload-img2"
           @upload-img-start='uploadImgStart'
           @upload-img-end='uploadImgEnd'
           :upload-post-data="postData"
           :upload-img-obj="uploadImgData[1]"></v-upload-img>
         <div class="upload-item-title">{{uploadImgData[1].title}}</div>
       </flexbox-item>
      </flexbox>
       <div class="content-item bor-bottom" @click="showContent1 = !showContent1">
         <div class="flex a-start l-center">
           <!-- <i class="icon"></i> -->
           <span class="f14">牵引车45°照</span>
         </div>
         <img :src="staticImgData.btnRightImgUrl" :class="showContent1 ? 'up' : 'down'" alt="">
       </div>
      <flexbox v-if="showContent1" class="pad-t20 pad-b10 bgc-f4f4f4">
       <flexbox-item>
         <v-upload-img
           class="depart-upload-img2"
           @upload-img-start='uploadImgStart'
           @upload-img-end='uploadImgEnd'
           :upload-post-data="postData"
           :upload-img-obj="uploadImgData[4]"></v-upload-img>
         <div class="upload-item-title">{{uploadImgData[4].title}}</div>
       </flexbox-item>
       <flexbox-item>
         <v-upload-img
           class="depart-upload-img2"
           @upload-img-start='uploadImgStart'
           @upload-img-end='uploadImgEnd'
           :upload-post-data="postData"
           :upload-img-obj="uploadImgData[5]"></v-upload-img>
         <div class="upload-item-title">{{uploadImgData[5].title}}</div>
       </flexbox-item>
      </flexbox>
       <div class="content-item bor-bottom" @click="showContent2 = !showContent2">
         <div class="flex a-start l-center">
           <!-- <i class="icon"></i> -->
           <span class="f14">挂车证件照</span>
         </div>
         <img :src="staticImgData.btnRightImgUrl" :class="showContent2 ? 'up' : 'down'" alt="">
       </div>
      <flexbox v-if="showContent2" class="pad-t20 pad-b10 bgc-f4f4f4">
       <flexbox-item>
         <v-upload-img
           class="depart-upload-img"
           @upload-img-start='uploadImgStart'
           @upload-img-end='uploadImgEnd'
           :upload-post-data="postData"
           :upload-img-obj="uploadImgData[2]"></v-upload-img>
         <div class="upload-item-title">{{uploadImgData[2].title}}</div>
       </flexbox-item>
       <flexbox-item>
         <v-upload-img
           class="depart-upload-img2"
           @upload-img-start='uploadImgStart'
           @upload-img-end='uploadImgEnd'
           :upload-post-data="postData"
           :upload-img-obj="uploadImgData[3]"></v-upload-img>
         <div class="upload-item-title">{{uploadImgData[3].title}}</div>
       </flexbox-item>
      </flexbox>
       <div class="content-item bor-bottom" @click="showContent3 = !showContent3">
         <div class="flex a-start l-center">
           <!-- <i class="icon"></i> -->
           <span class="f14">挂车45°照</span>
         </div>
         <img :src="staticImgData.btnRightImgUrl" :class="showContent3 ? 'up' : 'down'" alt="">
       </div>
       <flexbox v-if="showContent3" class="pad-t20 pad-b10 bgc-f4f4f4">
         <flexbox-item>
           <v-upload-img
             class="depart-upload-img2"
             @upload-img-start='uploadImgStart'
             @upload-img-end='uploadImgEnd'
             :upload-post-data="postData"
             :upload-img-obj="uploadImgData[6]"></v-upload-img>
           <div class="upload-item-title">{{uploadImgData[6].title}}</div>
         </flexbox-item>
         <flexbox-item>
           <v-upload-img
             class="depart-upload-img2"
             @upload-img-start='uploadImgStart'
             @upload-img-end='uploadImgEnd'
             :upload-post-data="postData"
             :upload-img-obj="uploadImgData[7]"></v-upload-img>
           <div class="upload-item-title">{{uploadImgData[7].title}}</div>
         </flexbox-item>
       </flexbox>
      <!-- button -->
      <div class="pad-l-r15 mt25">
        <!--<p class="large-btn" :disabled="subBtnDisabled"-->
          <!--:class="[{'bgc-01a4f6':!subBtnDisabled}]"-->
           <!--@click="subButton">提交</p>-->
        <x-button @click.native="subButton" :disabled="subBtnDisabled" :class="[{'bgc-01a4f6':!subBtnDisabled}]">提交</x-button>
      </div>
      <div style="height:.15rem;"></div>
    </div>
     <!-- picker -->
     <div class="down-picker-bg " :class="[{'down-picker-bg-up':downPickerShow}]" >
       <div class="down-picker-container" :class="[{'down-picker-container-up':downPickerShow}]">
         <div class="flex l-center a-between f14 bor-bottom bgc-fff pad15">
           <span @click="downPickerShow=false" class="c-999">取消</span>
           <span @click="downPickerShow=false" class="c-01a4f6" >确定</span>
         </div>
         <Picker :data='trailerTypeSelectData' v-model='trailerTypePickerVal' @on-change='placeChange'></Picker>
       </div>
     </div>
     <!--loading-->
     <v-loading v-show="loadingShow" style="z-index:11"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
import '@/styles/multiPicker.css'
import '@/styles/downPicker.css'
import * as DirverApi from '@/api/dirver'
import * as MdmApi from '@/api/mdm'
import { getToken } from '@/api/qiniu'
import { XHeader, Picker, XButton, Flexbox, FlexboxItem, Panel, Cell } from 'vux'
import { Toast, MessageBox } from 'mint-ui'
import Loading from '@/components/common/loading/loading'
import * as ThreeStorage from '@/utils/store/token.js'
import UploadImg from '@/components/common/uploadImg/upload_type_one'
import Utils from '@/utils/util'
const QINIU_API = process.env.QINIU_API // 'http://up-z2.qiniu.com/' https://qiniu.lisa-test.unlcn.com/
export default {
  name: 'me-driverVehicleProfile',
  data() {
    return {
      staticImgData: {
        btnRightImgUrl: require('@/assets/image/common/btn_right.png')
      },
      carParam: {
        carrierInfo: { // 牵引车
          id: '',
          plate: '', // 车牌号
          operatingLicenseKey: '', // 运营许可证
          operatingLicenseAttachName: '',
          vehicleLicenseKey: '', // 行驶证
          vehicleLicenseAttachName: '',
          attachKey: '',
          attachName: '',
          attachKeyTwo: '',
          attachNameTwo: ''
        },
        driverId: '', // 司机id
        trailerInfo: { // 挂车
          id: '',
          plate: '', // 车牌号
          trailerType: '', // 挂车类型
          operatingLicenseKey: '', // 运营许可证
          operatingLicenseAttachName: '',
          vehicleLicenseKey: '', // 行驶证
          vehicleLicenseAttachName: '',
          attachKey: '',
          attachName: '',
          attachKeyTwo: '',
          attachNameTwo: ''
        }
      },
      uploadImgData: [
        {
          fileMark: 'carrierOperatingLicenseKey',
          title: '牵引车运营许可证正面',
          licenseTypeId: '5',
          attachTypeId: '01',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples_img/carrier_operating.png'),
          attachImgSrc: ''
        },
        {
          fileMark: 'carrierVehicleLicenseKey',
          title: '牵引车行驶证正面',
          licenseTypeId: '10',
          attachTypeId: '01',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples_img/carrier_vehicle.png'),
          attachImgSrc: ''
        },
        {
          fileMark: 'trailerOperatingLicenseKey',
          title: '挂车运营许可证正面',
          licenseTypeId: '5',
          attachTypeId: '01',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples_img/trailer_operating.png'),
          attachImgSrc: ''
        },
        {
          fileMark: 'trailerVehicleLicenseKey',
          title: '挂车行驶证正面',
          licenseTypeId: '10',
          attachTypeId: '01',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples_img/trailer_vehicle.png'),
          attachImgSrc: ''
        },
        {
          fileMark: 'carrier',
          title: '牵引车车头45度照片',
          licenseTypeId: '11',
          attachTypeId: '01',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_start_45.png'),
          attachImgSrc: ''
        },
        {
          fileMark: 'reverseCarrier',
          title: '牵引车车尾45度照片',
          licenseTypeId: '11',
          attachTypeId: '02',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_end_45.png'),
          attachImgSrc: ''
        },
        {
          fileMark: 'trailer',
          title: '挂车车头45度照片',
          licenseTypeId: '12',
          attachTypeId: '01',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_start_45.png'),
          attachImgSrc: ''
        },
        {
          fileMark: 'reverseTrailer',
          title: '挂车车尾45度照片',
          licenseTypeId: '12',
          attachTypeId: '02',
          attachDemoImgSrc: require('@/assets/image/v1/upload_examples/depart/car_end_45.png'),
          attachImgSrc: ''
        }
      ],
      showContent0: true,
      showContent1: false,
      showContent2: false,
      showContent3: false,
      postData: {
        token: '',
        imageUrl: QINIU_API,
        key: ''
      },
      progress: 0, // 进度条
      driver_Id: '',
      keyWordCarrierPlate: '',
      keyWordTrailerPlate: '',
      TrailerCanBind: false, // 挂车 是否能和当前牵引车 绑定
      carrierBlockShow: false,
      trailerBlockShow: true, // 挂车block显示
      isTrailerHave: false, // 初始有无挂车，或写完牵引车查出 有无对应挂车;初置无挂车值
      isTureCarrierPalte: false, // 合法牵引车车牌号
      loadingShow: false,
      carrierInfoIsHaveNull: false,
      trailerInfoIsHaveNull: false,
      imgInfoIsHaveNull: false,
      subBtnDisabled: false,
      untieBtnDisabled: true,
      isDirverBindCarrier: true, // 当前司机 与当前牵引车 可不可以绑定
      searchRun: false, // 开始查询
      prevent_repeat: false, // 防止重复提交
      downPickerShow: false, // picker显示
      keyWordTrailerTrailerType: '', // 输入挂车类型值
      trailerTypePickerVal: [], // picker选择挂车类型
      trailerTypeSelectData: [],
      trailerTypeListData: [], // 获取的挂车类型参照表
      isTrailerAuthStatus: false
    }
  },
  components: {
    XHeader, Picker, XButton, Flexbox, FlexboxItem, Panel, Cell,
    'v-upload-img': UploadImg, 'v-loading': Loading
  },
  created() {
    this.driver_Id = ThreeStorage.getDriverId()
    this.getQiniuToken()
    this.getInfoInit()
    this.getTrailerTypeNameList()
  },
  mounted() {
    this.$watch('keyWordCarrierPlate', (newVal, oldVal) => {
      if (this.searchRun) {
        // 当弹窗 选中值 关闭后 再重新开启 keyword查询
        let timer = null
        clearTimeout(timer)
        // 再次创建延时器
        const val = newVal
        const driverId = this.driver_Id
        if (val.length === 7) {
          const check_plate = Utils.isVehicleNumber(val)
          if (!check_plate) {
            Toast({
              message: '请输入合法车牌号',
              duration: 2000
            })
            this.subBtnDisabled = true
            return
          }
        }
        if (val !== '' && this.keyWordCarrierPlate.length >= 7 && newVal.length > oldVal.length) {
          this.carParam.carrierInfo.plate = this.keyWordCarrierPlate
          // 挂车车牌 重置 置空
          this.carParam.trailerInfo.plate = ''
          timer = setTimeout(() => {
            const req_params = {
              driverId: driverId,
              plate: val
            }
            DirverApi.getTrailer(req_params).then(res => {
              // console.log('getTrailer', res)
              if (res.code === 0) {
                if (res.data) {
                  this.carParam.trailerInfo.plate = res.data
                  // 当前 已有牵引车，有挂车车牌的 绑定
                  // this.TrailerCanBind = true // 当前挂车车牌可绑
                  this.trailerBlockShow = true
                  this.isTrailerHave = true
                } else {
                  this.isTrailerHave = false
                  this.trailerBlockShow = false
                }
                this.isDirverBindCarrier = true
                Toast({
                  message: '当前牵引车与司机可绑定',
                  duration: 3000
                })
              }
              // console.log('填牵引车带出挂车', this.carParam.trailerInfo.plate, 'isTrailerHave',
              //   this.isTrailerHave, 'trailerBlockShow', this.trailerBlockShow, 'isDirverBindCarrier', this.isDirverBindCarrier)
            }).catch(res => {
              // 挂车车牌获取失败 = 无挂车车牌, 当前 已有牵引车, tblock隐藏
              this.isTrailerHave = false
              this.trailerBlockShow = false
              this.isDirverBindCarrier = false
              this.keyWordCarrierPlate = ''
              console.log('error', res)
            })
          }, 1200)
        }
        if (val !== '' && newVal.length < oldVal.length) {
          // this.trailerBlockShow = false
          this.carParam.trailerInfo.plate = ''
        }
        if (val === '') {
          this.trailerBlockShow = true
          this.carParam.trailerInfo.plate = ''
        }
      }
    })
    this.$watch('keyWordTrailerPlate', (newVal, oldVal) => {
      if (this.searchRun) {
        // 当弹窗 选中值 关闭后 再重新开启 keyword查询
        let timer = null
        clearTimeout(timer)
        // 再次创建延时器
        const val = newVal
        const driverId = this.driver_Id
        // 该牵引车 无绑定挂车车牌 则 可以输入 挂车车牌号
        if (!this.trailerBlockShow) {
          if (val.length === 7) {
            const check_plate = Utils.isVehicleNumber(val)
            if (!check_plate) {
              Toast({
                message: '请输入合法车牌号',
                duration: 2000
              })
              this.subBtnDisabled = true
              return
            }
          }
          if (val !== '' && val.length >= 7 && newVal.length > oldVal.length) {
            this.carParam.trailerInfo.plate = '' // 赋值前初始 置空
            // console.log('trailer-val', val)
            timer = setTimeout(() => {
              const req_params = {
                driverId: driverId,
                carrierPlate: this.keyWordCarrierPlate,
                trailerPlate: val
              }
              DirverApi.getVerifyTrailer(req_params).then(res => {
                // console.log('getVerifyTrailer', res)
                if (res.code === 0) {
                  if (res.data) {
                    // console.log('getVerifyTrailer-res.data', res.data)
                  }
                  this.carParam.trailerInfo.plate = req_params.trailerPlate
                  this.subBtnDisabled = false
                  this.TrailerCanBind = true // 当前挂车车牌可绑
                  this.isDirverBindCarrier = true
                  Toast({
                    message: '当前挂车与牵引车可绑定',
                    duration: 2000
                  })
                }
              }).catch(res => {
                this.subBtnDisabled = false
                this.TrailerCanBind = false
                this.keyWordTrailerPlate = ''
                console.log('error', res)
              })
            }, 1200)
          }
        }
      }
      // console.log('keyWordTrailer-TrailerCanBind', this.TrailerCanBind, 'trailerBlockShow',
      //   this.trailerBlockShow, 'trailerInfo', this.carParam.trailerInfo.plate)
    })
  },
  methods: {
    isTrailerAuthStatusFunc(data) {
      console.log('isTrailerAuthStatusFunc()-data', data)
      const { trailerInfo } = data
      if (parseInt(trailerInfo.authStatus) === 1) {
        this.isTrailerAuthStatus = false
      } else if (trailerInfo.authStatus === null) {
        this.isTrailerAuthStatus = true
      } else {
        this.isTrailerAuthStatus = true
      }
    },
    // 页面获取 挂车类型列表
    getTrailerTypeNameList() {
      const new_arr = []
      this.trailerTypeSelectData = [] // ['三位平板', '四位平板', '六位平板', '七位平板', '中置轴']
      MdmApi.getTrailerTypeList().then(res => {
        // console.log('getTrailerTypeList()', res.data)
        if (res.code === 0) {
          this.trailerTypeListData = res.data
          for (let i = 0; i < res.data.length; i++) {
            // t007 救援车，  t012 单车 不属于挂车
            if (res.data[i].code !== 't007' && res.data[i].code !== 't012') {
              new_arr.push(res.data[i].value)
            }
          }
          this.trailerTypeSelectData.push(new_arr)
          // console.log('trailerTypeSelectData', this.trailerTypeSelectData)
        }
      }).catch(res => {
        console.warn('error', res)
        Toast({
          message: res.message || '获取挂车类型列表失败，请稍候再试',
          duration: 1500
        })
      })
    },
    // 页面获取初始数据-车辆证件信息
    getInfoInit: function() {
      const that = this
      that.loadingShow = true
      DirverApi.getVehicle(this.driver_Id).then(res => {
        // console.log('getVehicle', res)
        that.loadingShow = false
        if (res.code === 0) {
          const res_data = res.data
          this.isTrailerAuthStatusFunc(res_data)
          const { driverId, carrierInfo, trailerInfo } = res_data
          const new_carrierInfo = this.filterCarInfo(carrierInfo) // 过滤后 赋值给了 this.carParam
          const new_trailerInfo = this.filterCarInfo(trailerInfo) // 过滤后 赋值给了 this.carParam
          // console.log('getVehicle-res-data', this.carParam)
          // 牵引车牌
          if (res_data.carrierInfo.plate) {
            that.keyWordCarrierPlate = res_data.carrierInfo.plate // 返回值有无 牵引车的车牌号，有则赋值给 keyword
            // 有牵引车返回值 input隐藏，用bolck展示
            that.carrierBlockShow = true
            that.untieBtnDisabled = false
            that.isDirverBindCarrier = true // 当前牵引车 不可与司机绑定
          } else {
            that.untieBtnDisabled = true // 当没有 牵引车时，开启按钮，关闭自灰
            that.carrierBlockShow = false
            that.isDirverBindCarrier = false
          }
          // 挂车车牌
          if (res_data.trailerInfo.plate) {
            that.keyWordTrailerPlate = res_data.trailerInfo.plate
            // 有挂车返回值 input隐藏，用bolck展示
            that.trailerBlockShow = true
            that.isTrailerHave = true
            // this.TrailerCanBind = true // 挂车车牌号 有值，则 挂车和牵引车 是绑定关系，就直接 可绑TrailerCanBind = true
          } else {
            that.trailerBlockShow = true
            that.isTrailerHave = false
          }
          // 挂车类型
          if (res_data.trailerInfo.trailerType && res_data.trailerInfo.trailerTypeName) {
            that.keyWordTrailerTrailerType = res_data.trailerInfo.trailerTypeName
          } else {
            that.keyWordTrailerTrailerType = ''
          }
          // 图片信息
          that.uploadImgData[0].attachImgSrc = res_data.carrierInfo.operatingLicensePath
          that.uploadImgData[1].attachImgSrc = res_data.carrierInfo.vehicleLicensePath
          that.uploadImgData[2].attachImgSrc = res_data.trailerInfo.operatingLicensePath
          that.uploadImgData[3].attachImgSrc = res_data.trailerInfo.vehicleLicensePath
          that.uploadImgData[4].attachImgSrc = res_data.carrierInfo.attachPath
          that.uploadImgData[5].attachImgSrc = res_data.carrierInfo.attachPathTwo
          that.uploadImgData[6].attachImgSrc = res_data.trailerInfo.attachPath
          that.uploadImgData[7].attachImgSrc = res_data.trailerInfo.attachPathTwo
          console.log('res_data.trailerInfo.vehicleLicensePath', res_data.trailerInfo.vehicleLicensePath)
          console.log('that.uploadImgData[3]', that.uploadImgData[3])
          this.carrierInfoIsHaveNull = this.checkInfoIsNull(new_carrierInfo)
          this.trailerInfoIsHaveNull = this.checkInfoIsNull(new_trailerInfo)
          // 如果 信息完善 则 按钮自灰
          if (this.carrierInfoIsHaveNull && this.trailerInfoIsHaveNull) {
            this.subBtnDisabled = true
          } else {
            this.subBtnDisabled = false
          }
          this.carParam = res_data
          this.carParam.driverId = driverId
          if (!this.carParam.driverId) {
            console.log('getVehicle车辆信息获取中的driverId没有')
            this.carParam.driverId = ThreeStorage.getDriverId()
          }
          // console.log('subBtnDisabled', this.subBtnDisabled, '牵车和挂车能否绑TrailerCanBind', this.TrailerCanBind)
        }
      }).catch(res => {
        that.loadingShow = false
        console.warn('error', res)
        Toast({
          message: res.message || '系统繁忙，请稍候再试',
          duration: 1500
        })
      })
    },
    // 解构过滤不需要的参数
    filterCarInfo: function(data) {
      const { id, plate, operatingLicensePath, operatingLicenseKey, operatingLicenseAttachName, vehicleLicenseKey,
        vehicleLicenseAttachName, vehicleLicensePath } = data // 多余不需要的值 不解构出来
      const new_carInfo = { id, plate, operatingLicensePath, operatingLicenseKey, operatingLicenseAttachName, vehicleLicenseKey,
        vehicleLicenseAttachName, vehicleLicensePath }
      return new_carInfo
    },
    // 检查是否有空值
    checkInfoIsNull: function(object) {
      const new_carInfo = object
      if (new_carInfo) {
        for (const k in new_carInfo) {
          if (new_carInfo[k] !== 0) {
            // new_carInfo[k] !== 0 针对有参数值为0 ，0 会判断false ,例：sex:0 => new_carInfo[k]为false
            if (!new_carInfo[k] || new_carInfo[k] === '') {
              // console.log('new_[k]其中某值为空', new_carInfo, k, new_carInfo[k])
              return false
            }
          }
        }
      } else {
        return false
      }
      return true
    },
    carrierHaveChange: function() {
      // dd
    },
    // cityPicker 用户有移动选项时 才触发 取值
    placeChange: function(values) {
      if (values) {
        this.subBtnDisabled = false
        this.keyWordTrailerTrailerType = values[0]
        this.carParam.trailerInfo.trailerTypeName = values[0]
        this.carParam.trailerInfo.trailerType = this.trailerType2Name(this.trailerTypeListData, values[0], 'value', 'code')
        console.log('trailerType', this.carParam.trailerInfo.trailerType, 'trailerTypeName', this.carParam.trailerInfo.trailerTypeName)
      }
    },
    // 挂车类型 与名称转换 str参数值，
    trailerType2Name(arr, str, req, res) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][req] === str) {
          return arr[i][res]
        }
      }
    },
    // 校检车牌
    checkCarPlate: function(val) {
      const check_plate = Utils.isVehicleNumber(val)
      if (!check_plate) {
        Toast({
          message: '请输入合法车牌号',
          duration: 2000
        })
        this.isTureCarrierPalte = false
      } else {
        this.isTureCarrierPalte = true
      }
    },
    alertTrailerInput: function() {
      Toast({
        message: '请先填写牵引车车牌号',
        duration: 1500
      })
    },
    // 解绑牵引车
    UnbindCarrier: function() {
      const that = this
      const driver_Id = ThreeStorage.getDriverId()
      const toParam = {
        driverId: driver_Id,
        plate: that.carParam.carrierInfo.plate
      }
      // console.log('解绑点击toParam', toParam)
      const check_res = that.UnbindCheckParam(toParam)
      if (check_res) {
        MessageBox({
          title: '提示',
          message: '您确定要解绑当前牵引车吗?',
          showCancelButton: true
        }).then(action => {
          if (action === 'confirm') {
            that.loadingShow = true
            DirverApi.getUnbindCarrier(toParam).then(res => {
              // console.log('getUnbindCarrier', res)
              that.loadingShow = false
              if (res.code === 0) {
                const res_data = res.data
                const { driverId, carrierInfo, trailerInfo } = res_data
                this.carParam.driverId = driverId
                if (!this.carParam.driverId) {
                  console.log('getVehicle车辆信息获取中的driverId没有')
                  this.carParam.driverId = ThreeStorage.getDriverId()
                }
                that.carParam.carrierInfo = this.filterCarInfo(carrierInfo) // 过滤后 赋值给了 this.carParam
                that.carParam.trailerInfo = this.filterCarInfo(trailerInfo) // 过滤后 赋值给了 this.carParam
                // console.log('getVehicle-res-data', this.carParam)
                if (res_data.carrierInfo.plate) {
                  that.keyWordCarrierPlate = res_data.carrierInfo.plate // 返回值有无 牵引车的车牌号，有则赋值给 keyword
                  // 有牵引车返回值 input隐藏，用bolck展示
                  that.carrierBlockShow = true
                } else {
                  that.carrierBlockShow = false
                }
                if (res_data.trailerInfo.plate) {
                  that.keyWordTrailerPlate = res_data.trailerInfo.plate
                  // 有挂车返回值 input隐藏，用bolck展示
                  that.trailerBlockShow = true
                } else {
                  that.trailerBlockShow = false
                }
                this.subBtnDisabled = false
              }
              this.$router.push({ name: 'me-driverLanding' })
            }).catch(res => {
              that.loadingShow = false
              console.warn('error', res)
            })
          }
        }).catch(res => {
          // console.log('MessageBox-btn-', res)
          if (res === 'cancel') {
            console.log('取消')
          }
        })
      }
    },
    // 解绑牵引车预校检
    UnbindCheckParam: function(params) {
      const { plate } = params
      if (!plate) {
        Toast({
          message: '请先填写牵引车车牌号',
          duration: 3000
        })
        return
      }
      if (plate.length < 7) {
        Toast({
          message: '请先填写牵引车车牌号',
          duration: 3000
        })
        return
      }
      return true
    },
    // 牵引车输入框获取焦点
    carrierPlateInputEnter: function() {
      this.searchRun = true
      this.carrierBlockShow = false
    },
    // 挂车输入框获取焦点
    trailerPlateInputEnter: function() {
      this.searchRun = true
      // 初始有挂车值 则 不进行输入，显示 blcok; 或 输入牵引车后查询 是否有带出 挂车值，有挂车值，显示block
      if (this.isTrailerHave) {
        this.trailerBlockShow = true
      } else {
        this.trailerBlockShow = false
      }
    },
    // 牵引车解绑提示
    carrierAlertClick: function() {
      Toast({
        message: '解绑牵引车之前不可修改',
        duration: 2000
      })
    },
    // 七牛token
    getQiniuToken: function() {
      const that = this
      getToken().then(res => {
        if (res.code === 0) {
          that.postData.token = res.data
        }
      }).catch(res => {
        console.warn('error', res)
        Toast({
          message: res.message || '获取七牛token失败，请稍候再试',
          duration: 1500
        })
      })
    },
    // 提交
    subButton: function() {
      // console.log('subButton()2-subBtnDisabled', this.subBtnDisabled)
      const that = this
      that.carParam.carrierInfo.plate = that.keyWordCarrierPlate
      if (!this.trailerBlockShow && !this.TrailerCanBind) {
        that.carParam.trailerInfo.plate = that.keyWordTrailerPlate
      }
      const check_res = that.checkParam(that.carParam)
      if (check_res) {
        if (that.prevent_repeat) { return }
        that.prevent_repeat = true
        that.loadingShow = true
        that.subBtnDisabled = true
        const carinfo_params = that.carParam
        DirverApi.updateCarInfo(carinfo_params).then(res => {
          // console.log('updateDriver', res)
          that.loadingShow = false
          that.prevent_repeat = false
          that.subBtnDisabled = false
          if (res.code === 0) {
            Toast({
              message: '提交成功'
            })
            this.$router.push({ name: 'me-driverLanding' })
          }
        }).catch(res => {
          that.prevent_repeat = false
          that.loadingShow = false
          that.subBtnDisabled = false
          console.warn('error', res)
        })
      }
    },
    // 提交预校检
    checkParam: function(params) {
      const { carrierInfo, trailerInfo } = params
      if (this.subBtnDisabled) {
        Toast({
          message: '请更换信息再提交',
          duration: 2000
        })
        return
      }
      if (carrierInfo.plate === '') {
        Toast({
          message: '请先填写牵引车车牌号',
          duration: 2000
        })
        return
      }
      // if (!this.isDirverBindCarrier) {
      //   Toast({
      //     message: '当前牵引车不能与司机绑定',
      //     duration: 2000
      //   })
      //   return
      // }
      if (trailerInfo.plate === '') {
        Toast({
          message: '请先填写挂车车牌号',
          duration: 2000
        })
        return
      }
      const check_trailerType = Utils.isLegalObject(trailerInfo.trailerType)
      if (!check_trailerType) {
        Toast({
          message: '请先选择挂车类型',
          duration: 2000
        })
        return
      }
      // 挂字 提示
      // const reg1 = RegExp(/^[挂]g/)
      // let res_checkTrailerPlate = reg1.test(trailerInfo.plate)
      let res_checkTrailerPlate
      let new_str
      if (trailerInfo.plate) {
        new_str = trailerInfo.plate.substr(trailerInfo.plate.length - 1, 1)
        // console.log('new_str', new_str, 'trailerInfo.plate', trailerInfo.plate)
        if (new_str.indexOf('挂') !== -1) {
          res_checkTrailerPlate = true
        } else {
          res_checkTrailerPlate = false
        }
      }
      // console.log('indexOf(挂)', trailerInfo.plate.indexOf('挂') !== -1, 'res_checkTrailerPlate', res_checkTrailerPlate)
      if (!res_checkTrailerPlate) {
        Toast({
          message: '挂车车牌末端请带"挂"字',
          duration: 2000
        })
        return
      }

      // if (!this.TrailerCanBind) {
      //   Toast({
      //     message: '请填写可绑定挂车车牌号',
      //     duration: 2000
      //   })
      //   return
      // }
      // if (carrierInfo.operatingLicenseKey === '') {
      //   Toast({
      //     message: '请上传牵引车运营许可证',
      //     duration: 2000
      //   })
      //   return
      // }
      // if (carrierInfo.vehicleLicenseKey === '') {
      //   Toast({
      //     message: '请上传牵引车行驶证',
      //     duration: 2000
      //   })
      //   return
      // }
      // if (trailerInfo.operatingLicenseKey === '') {
      //   Toast({
      //     message: '请上传挂车运营许可证',
      //     duration: 2000
      //   })
      //   return
      // }
      // if (trailerInfo.vehicleLicenseKey === '') {
      //   Toast({
      //     message: '请上传挂车行驶证',
      //     duration: 2000
      //   })
      //   return
      // }
      return true
    },
    // 图片开始上传
    uploadImgStart: function() {
      this.loadingShow = true
    },
    // 子组件-上传图片后-通知父组件
    uploadImgEnd: function(qiniuResData) {
      const that = this
      if (qiniuResData.status) {
        that.subBtnDisabled = false
        that.updateFileDataFunc(qiniuResData)
      } else {
        that.loadingShow = false
        Toast({
          message: '图片上传失败',
          duration: 1000
        })
      }
    },
    // 上传完 数据赋值
    updateFileDataFunc(qiniuResData) {
      const that = this
      this.loadingShow = false
      console.log('qiniuResData', qiniuResData)
      if (qiniuResData.uploadImgObj.fileMark === 'carrierOperatingLicenseKey') {
        that.carParam.carrierInfo.operatingLicenseKey = qiniuResData.hash
        that.carParam.carrierInfo.operatingLicenseAttachName = qiniuResData.imgName
      } else if (qiniuResData.uploadImgObj.fileMark === 'carrierVehicleLicenseKey') {
        that.carParam.carrierInfo.vehicleLicenseKey = qiniuResData.hash
        that.carParam.carrierInfo.vehicleLicenseAttachName = qiniuResData.imgName
      } else if (qiniuResData.uploadImgObj.fileMark === 'trailerOperatingLicenseKey') {
        that.carParam.trailerInfo.operatingLicenseKey = qiniuResData.hash
        that.carParam.trailerInfo.operatingLicenseAttachName = qiniuResData.imgName
      } else if (qiniuResData.uploadImgObj.fileMark === 'trailerVehicleLicenseKey') {
        that.carParam.trailerInfo.vehicleLicenseKey = qiniuResData.hash
        that.carParam.trailerInfo.vehicleLicenseAttachName = qiniuResData.imgName
      } else if (qiniuResData.uploadImgObj.fileMark === 'carrier') {
        that.carParam.carrierInfo.attachKey = qiniuResData.hash
        that.carParam.carrierInfo.attachName = qiniuResData.imgName
      } else if (qiniuResData.uploadImgObj.fileMark === 'reverseCarrier') {
        that.carParam.carrierInfo.attachKeyTwo = qiniuResData.hash
        that.carParam.carrierInfo.attachNameTwo = qiniuResData.imgName
      } else if (qiniuResData.uploadImgObj.fileMark === 'trailer') {
        that.carParam.trailerInfo.attachKey = qiniuResData.hash
        that.carParam.trailerInfo.attachName = qiniuResData.imgName
      } else if (qiniuResData.uploadImgObj.fileMark === 'reverseTrailer') {
        that.carParam.trailerInfo.attachKeyTwo = qiniuResData.hash
        that.carParam.trailerInfo.attachNameTwo = qiniuResData.imgName
      }
      console.log('that.carParam', that.carParam)
    }
  }
}
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
  }
  .bor-bottom:after {
    top: 98%;
  }
  .large-btn{
    background-color: #dedede;
  }
  .large-btn.bgc-01a4f6{
    background-color: #01a4f6;
  }
  .weui-btn_default.bgc-01a4f6{
    color: #fff;
    background-color: #01a4f6;
  }
  .min-btn{
    background-color: #dedede;
  }
  .min-btn.bgc-01a4f6{
    background-color: #01a4f6;
  }
  .input-cells>input{
    text-align: right ;
  }
  /* main */
  .main-top{
    height: .4rem;
    line-height: .4rem;
    font-size: .14rem;
    /* color: #666; */
    color: #999;
    background-color: #f5f9fd;
    text-align: left;
  }
  .text-show-block{
    display: block;
    line-height: .24rem;
    font-size: .14rem;
    overflow: hidden;
    margin-left: 0;
    line-height: .32rem;
    font-size: 0.14rem;
    text-align: right;
  }
  /*upload*/
  .depart-upload-img{
    width: 1.6rem;
    height: 1.75rem;
    margin: 0 auto;
  }
  .depart-upload-img2{
    width: 1.6rem;
    height: 1.05rem;
    margin: 0 auto;
  }
  /*禁止vux-ui原样式*/
  /*.weui-cell:before{*/
  /*height: 0;*/
  /*border-top: none;*/
  /*}*/
  .vux-tap-active:active {
    /*background-color: #ECECEC;*/
    background-color: #fff;
  }
  .weui-cell.pad-t-b15{
    padding-bottom: .15rem;
    padding-top: .15rem;
  }
  /* content */
  .content-item{
    padding-left: .15rem;
    padding-right: .15rem;
    padding-top: .15rem;
    padding-bottom: .15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content-item>img{
    width: .06rem;
    height: .1rem;
    margin-right: .03rem;
  }
  .content-item>img.up{
    transform: rotate(270deg);
  }
  .content-item>img.down{
    transform: rotate(90deg);
  }
</style>

